<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" name="username" />
    <button id="btn">注册</button>
    <script>
      /* 本案例需求:  点击注册按钮 获取输入框的value属性值 并在浏览器里面打印
          (1)请找出下列代码产生的bug
              如何找出来的?
              原因分析:
          (2)如果想要实现正确的需求,应该如何实现
      */
      // const val = document.querySelector('[name=username]').value
      // const btn = document.querySelector('#btn')
      // btn.addEventListener('click', function () {
      //   console.log(val)
      // })

      const val = document.querySelector("[name=username]")
      const btn = document.querySelector("#btn")
      btn.addEventListener("click", function () {
        console.log(val.value)
      })
    </script>
  </body>
</html>
